<!--  -->
<template>
  <div v-if="userInfo.userType != 'track'">
    <a-card style="margin-bottom: 10px">
      <!-- <template slot="extra">
        <DateTimeRange
          style="margin-left: auto; width: 450px"
          v-model="dateRange"
          :startDate.sync="startTime"
          :endDate.sync="endTime"
          :allowClear="false"
          v-if="userInfo.identityType === '1'"
        ></DateTimeRange>
        <a-select v-model="year" v-else :style="{ width: '250px' }">
          <a-select-option v-for="(item, index) in years" :key="index" :value="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-button type="link" @click="handleFilter">查询</a-button>
      </template> -->
      <div class="right_title" slot="title">
        <!-- <div class="right_title_icon"></div> -->
        <div class="right_title_title">数据仪表盘 </div>
      </div>
    </a-card>
    <a-row :gutter="20" style="margin: 0">
      <a-col
        :sm="24"
        :md="24"
        :xl="24"
        :style="{ marginBottom: '12px', paddingRight: 0, paddingLeft: 0 }"
      >
        <a-card style="margin-bottom: 10px">
          <div class="right_title">
            <div class="right_title_icon"></div>
            <div class="right_title_title">数据概览</div>
            <!-- <a-select
              style="width: 90px; margin-left: auto"
              v-model="daysQueryTypes"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in daysQueryTypesOption"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select> -->
          </div>
          <div class="dataField"></div>
          <a-row :gutter="24">
            <a-col
              v-for="(item, index) in overview.girds || []"
              :key="index"
              :sm="24"
              :md="12"
              :xl="6"
            >
              <div class="marketing_data">
                <div class="marketing_data_title">{{ item.label }}</div>
                <div class="marketing_data_price">
                  {{ item.num | digit }}
                  <!-- <span v-if="item.count">（{{ item.count }}笔）</span> -->
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
        
      </a-col>
       
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import storage from 'store'
import {
  getMessageList,
  getFileList,
  getmarketingprogress,
  getdashboardindicatorbank,
  getdashboardindicatorbranch,
  getTodoList,
  otherRoleQuery
} from '@/api/set'
import { dashboardOverview, dashboardTread, dashboardRanking } from '@/api/system'
import { shortDataCount, shortCount } from '@/api/short'
import MychartBar from './mychartBar.vue'
import myChartLine from './myChartLine.vue'
import { DateTimeRange } from '@/components'
import { digitSymbolFormat } from '@/utils/index'
import { mapState } from 'vuex'
export default {
  data() {
    return { 
      overview: {}
       
    }
  },
  mounted() {
    // this.userInfo = storage.get('userInfo')
    this.handleFilter()
    // let years = []
    // const date = new Date()
    // const year = date.getFullYear()
    // ;[...new Array(5)].forEach((el, index) => {
    //   years.push({ name: new Date(year - index, 0, 1).getFullYear(), className: 'className' })
    // })
    // this.years = years
  },
  components: {
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.info
    })
  },
  methods: {
    handleFilter() {
      const { dataTradeTypes, userInfo } = this
      if (userInfo.userType === 'track') {
        return
      }
      if (userInfo.userType === 'admin') {
        shortCount({ dateType: dataTradeTypes }).then((resp) => {
          this.overview = {
            girds: [
              { label: '总充值金额', num: resp.data.allCharge || 0 },
              { label: '总达人卡', num: resp.data.allDrk || 0 },
              { label: '总注册用户', num: resp.data.allUsers || 0 },
              { label: '总发放奖励', num: resp.data.allReward || 0 },
              { label: '累计提现', num: resp.data.allWithDraw || 0 },
              { label: '累计提现次数', num: resp.data.allWithDrawNumber || 0 },
              
              { label: '昨日提现', num: resp.data.addWithDraw || 0 },
              { label: '昨日提现次数', num: resp.data.addWithDrawNumber || 0 },
              { label: '昨日订单数', num: resp.data.addCharge || 0 },
              { label: '昨日新增达人卡', num: resp.data.addDrk || 0 },
              { label: '昨日新增用户数', num: resp.data.addUser || 0 },
              { label: '昨日发放奖励', num: resp.data.addReward || 0 },
           
            ]
          }
        })
      } else {
        shortDataCount({ dateType: dataTradeTypes }).then((resp) => {
          this.overview = {
            girds: [
              { label: '总充值金额', num: resp.data.allCharge || 0 },
              { label: '总达人卡', num: resp.data.allDrk || 0 },
              { label: '总注册用户', num: resp.data.allUsers || 0 },
              { label: '总发放奖励', num: resp.data.allReward || 0 }
            ]
          }
        })
      }
    },
    loadBrandData(status) {
      const { dataTradeTypes, year, userInfo } = this
      otherRoleQuery({ year, type: dataTradeTypes }).then((resp) => {
        const { brandDataOverview, brandIndicatorStat, brandMonthDivideStatList } = resp.data
        if (status != 'stat') {
          let girds =
            userInfo.identityType === '2'
              ? [
                  { label: '投资项目', num: brandDataOverview.projectNum },
                  { label: '出资金额', num: brandDataOverview.investAmount },
                  { label: '合作品牌', num: brandDataOverview.brandNum },
                  { label: '累计分账', num: brandDataOverview.divideAmount }
                ]
              : [
                  { label: '投资项目', num: brandDataOverview.projectNum },
                  { label: '营业金额', num: brandDataOverview.incomeAmount },
                  { label: '累计分账支出', num: brandDataOverview.totalDivideAmount },
                  { label: '资方分账支出', num: brandDataOverview.capitalDivideAmount }
                ]
          this.overview = {
            ...brandDataOverview,
            girds,
            date:
              (brandDataOverview.describe || '数据截至') +
              ((brandDataOverview.beginTime ? brandDataOverview.beginTime + ' ~ ' : '') +
                (brandDataOverview.endTime || ''))
          }
          this.monthDivideStatList = brandMonthDivideStatList
        }
        this.tradeData = brandIndicatorStat
      })
    },
    loadCapitalData(status) {
      const { dataTradeTypes, year, userInfo } = this
      otherRoleQuery({ year, type: dataTradeTypes }).then((resp) => {
        const { capitalDataOverview, capitalIndicatorStat, capitalMonthDivideStatList } = resp.data
        if (status != 'stat') {
          let girds =
            userInfo.identityType === '2'
              ? [
                  { label: '投资项目', num: capitalDataOverview.projectNum },
                  { label: '出资金额', num: capitalDataOverview.investAmount },
                  { label: '合作品牌', num: capitalDataOverview.brandNum },
                  { label: '累计分账', num: capitalDataOverview.divideAmount }
                ]
              : [
                  { label: '投资项目', num: capitalDataOverview.projectNum },
                  { label: '营业金额', num: capitalDataOverview.investAmount },
                  { label: '累计分账支出', num: capitalDataOverview.brandNum },
                  { label: '资方分账支出', num: capitalDataOverview.divideAmount }
                ]
          this.overview = {
            ...capitalDataOverview,
            girds,
            date:
              (capitalDataOverview.describe || '数据截至') +
              ((capitalDataOverview.beginTime ? capitalDataOverview.beginTime + ' ~ ' : '') +
                (capitalDataOverview.endTime || ''))
          }
          this.monthDivideStatList = capitalMonthDivideStatList
        }
        capitalIndicatorStat.date =
          (capitalIndicatorStat.describe || '数据截至') +
          ((capitalIndicatorStat.beginTime ? capitalIndicatorStat.beginTime + ' ~ ' : '') +
            (capitalIndicatorStat.endTime || ''))
        this.tradeData = capitalIndicatorStat
      })
    },
    loadRanking() {
      const { dateRankTypes, rankTabsActive, rankTabs, startTime, endTime } = this
      // const
      dashboardRanking(
        { dateType: dateRankTypes, beginTime: startTime, endTime },
        rankTabs[rankTabsActive].type
      ).then((resp) => {
        resp.data.date =
          resp.data.describe +
          ((resp.data.beginTime ? resp.data.beginTime + ' ~ ' : '') + (resp.data.endTime || ''))
        this.rankingData = resp.data
      })
    },
    tradeTypesHandler(record, index) {
      if (this.dataTradeTypes != record.value) {
        this.dataTradeTypes = record.value
        this.dataTradeTypesName = record.label
        this.dataTradeTypesIndex = index
        this.userInfo.identityType === '1'
          ? this.loadTreadData()
          : this.userInfo.identityType == '2'
          ? this.loadCapitalData('stat')
          : this.loadBrandData('stat')
      }
    },
    loadOverviewData() {
      const { daysQueryTypes, startTime, endTime } = this
      dashboardOverview({ dateType: daysQueryTypes, beginTime: startTime, endTime }).then(
        (resp) => {
          let girds = [
            { label: '新增资方', num: resp.data.capitalNum },
            { label: '新增品牌', num: resp.data.brandNum },
            { label: '新增店铺', num: resp.data.storeNum },
            { label: '营业收入', num: resp.data.incomeAmount }
          ]
          this.overview = {
            ...resp.data,
            girds,
            date:
              resp.data.describe +
              ((resp.data.beginTime ? resp.data.beginTime + ' ~ ' : '') + (resp.data.endTime || ''))
          }
        }
      )
    },
    loadTreadData() {
      const { dataTradeTypesIndex, startTime, endTime, dataTradeTypesOpions, daysTradeTypes } = this
      dashboardTread({
        type: dataTradeTypesOpions[dataTradeTypesIndex].value,
        beginTime: startTime,
        endTime,
        dateType: daysTradeTypes
      }).then((resp) => {
        resp.data.date =
          (resp.data.describe || '数据截至') +
          ((resp.data.beginTime ? resp.data.beginTime + ' ~ ' : '') + (resp.data.endTime || ''))
        this.tradeData = resp.data
      })
    },
    dateTypeChange(val) {
      const currentDate = new Date()
      const currentYear = currentDate.getFullYear()
      let currentMonth = currentDate.getMonth() + 1 // 注意月份是从0开始计数的，所以要加1

      // 如果月份小于10，补0
      if (currentMonth < 10) {
        currentMonth = '0' + currentMonth
      }

      const currentYearMonth = currentYear + '-' + currentMonth
      console.log(currentYearMonth) // 当前年份和月份（格式为YYYY-MM）
      if (val == 1) {
        this.progressFilter.dateall = currentYear
      } else {
        this.progressFilter.dateall = currentYearMonth
      }

      // this.progressFilter.dateall = currentYearMonth
      // this.progressFilter.date = currentYearMonth
    },
    goitem(item) {
      const path = item.path
      this.$router.push({ path })
    },
    onTabChange(e) {
      this.rankTabsActive = e
      this.loadRanking()
    },
    yearchange(v) {
      this.progressFilter.date = v + '-09'
    },
    goDownload() {
      this.$router.push('/config/manage/download')
    },
    goMessage() {
      this.$router.push('/config/manage/message')
    },
    goInformation() {
      this.$router.push('/information/payrollcredit/index')
    },
    goHurricane() {
      this.$router.push('/hurricane/index/index')
    },
    progresshandle() {
      this.yearOrmouth = this.progressFilter.dateType
      this.getmarketingprogress()
    },
    mothchange(v) {
      console.log(moment(v).format('YYYY-MM'))
      this.progressFilter.date = moment(v).format('YYYY-MM')
    },
    dataScopeSet(index) {
      this.progressFilter.dataScope = index
      this.getmarketingprogress()
    },
    indexTypeSet(index) {
      this.indexType = index
      this.getdashboardindicatorbranch()
      this.getdashboardindicatorbank()
    },
    getTodoList() {
      const { startTime: beginTime, endTime } = this
      getTodoList({ beginTime, endTime }).then((res) => {
        let data = [
          res.data.pendingCount && {
            name: '待审核项目',
            num: res.data.pendingCount,
            path: `/invest/audit?viewState=${0}`
          },
          res.data.rejectCount && {
            name: '已驳回项目',
            num: res.data.rejectCount,
            path: `/invest/audit?viewState=${2}`
          }
        ]
        this.todoLIst = data
      })
    },
    handle() {
      this.getdashboardindicatorbranch()
      this.getdashboardindicatorbank()
    },
    getdashboardindicatorbranch() {
      getdashboardindicatorbranch({
        year: this.date
      }).then((res) => {
        console.log(res)
        this.branchData = res.data
      })
    },
    getdashboardindicatorbank() {
      getdashboardindicatorbank({
        year: this.date
      }).then((res) => {
        console.log(res)
        this.bankData = res.data
      })
    },
    getFileList() {
      const { startTime: beginTime, endTime } = this
      getFileList({
        pageNum: 1,
        pageSize: 10,
        beginTime,
        endTime
      }).then((res) => {
        this.FileList = res.data
      })
    },
    getMessageList() {
      getMessageList({
        userId: storage.get('user_id')
        // viewState: type
      }).then((res) => {
        console.log(res)
        this.MessageList = res.data
      })
    },
    getmarketingprogress() {
      getmarketingprogress(this.progressFilter).then((res) => {
        console.log(res)
        this.marketingprogressData = res.data
      })
    },
    typeClick(e) {
      console.log(e)
      this.typeIndex = e
    }
  }
}
</script>

<style lang="less" scoped>
.ant-radio-group-small .ant-radio-button-wrapper {
  height: 42px;
  line-height: 42px;
}
.marketing_data_rank {
  font-size: 12px;
  color: #999999;
  font-weight: 400;

  font-family: PingFangSC-Regular, PingFang SC;
}

.marketing_data_price {
  font-size: 22px;
  color: #333333;
  margin: 5px 0;
  font-weight: 500;
  font-family: DIN-Medium, DIN;
}
.marketing_data_title {
  font-size: 14px;

  color: #666666;
  font-weight: 400;

  font-family: PingFangSC-Regular, PingFang SC;
}
.marketing_data {
  width: 100%;
  min-height: 100px;
  margin-bottom: 20px;
  padding: 10px 10px 10px 20px;
  background: #f7f8fa;
  border-radius: 2px;
}

.finishing_rate_list_item_list_item_ranking {
  width: 15px;
  text-align: center;
  font-size: 14px;
  color: #1f2026;
  font-size: 400;
  font-family: PingFangSC-Medium, PingFang SC;
}

.finishing_rate_list_item_list_item_val {
  font-size: 14px;

  color: #333333;

  font-weight: 500;

  font-family: DIN-Medium, DIN;
}
.finishing_rate_list_item_list_item_name {
  // width: 150px;
  margin-left: 5px;
  flex: 1;
  font-size: 14px;
  color: #1f2026;

  font-family: PingFangSC-Regular, PingFang SC;
}
.finishing_rate_list_item_list_item {
  display: flex;
  padding: 20px 25px;
  align-items: center;
  justify-content: space-between;
  height: 45px;
}
.finishing_rate_list_item_list {
  height: 460px;
  background: #f7f8fa;
  border-radius: 6px;
}
.finishing_rate_list_item_title {
  font-size: 14px;
  color: #1f2026;
  font-weight: 600;
  font-family: PingFangSC-Medium, PingFang SC;
}
.finishing_rate_list_item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.finishing_rate_list {
  display: flex;
  align-items: center;
}
.finishing_rate_item_name {
  height: 20px;
  margin: 0 0 10px 10px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.finishing_rate_item_null {
  flex: 1;
}
.finishing_rate_item {
  display: flex;
  flex: 1;
  // flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 162px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  // justify-content: center;
}
.finishing_rate {
  height: 250px;
  display: flex;
  align-items: center;
}
.mes_item_title {
  font-size: 14px;
  color: #333333;
  margin-bottom: 5px;
  font-family: PingFangSC-Regular, PingFang SC;
}
.mes_item_desc {
  font-size: 12px;
  color: #999999;
  font-family: PingFangSC-Regular, PingFang SC;
}

.mes_item_icon {
  width: 6px;
  height: 6px;
  background: #4393f2;
  margin-bottom: 22px;

  border-radius: 50%;
  margin-right: 10px;
}
.mesicon {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  margin-right: 10px;
}
.mes_item {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.dataField {
  font-size: 14px;

  color: #999999;
  margin: 10px 0;
}
.right_title_qurey {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #4393f2;
  color: #4393f2;
  cursor: pointer;
}
.right_title_time {
  font-size: 14px;
  margin-right: 20px;
  margin-left: auto;
  color: #333333;
  font-family: PingFangSC-Regular, PingFang SC;
}
.right_title_check {
  font-size: 14px;

  color: #4393f2;
  font-family: PingFangSC-Regular, PingFang SC;
  cursor: pointer;
}
.right_title_title {
  font-size: 16px;
  margin-right: 20px;

  color: #1f2026;
  font-weight: bold;
  font-family: PingFangSC-Medium, PingFang SC;
}
.right_title_icon {
  width: 4px;
  height: 17px;
  background: #4393f2;
  border-radius: 2px;
  margin-right: 10px;
}
.right_title {
  display: flex;
  align-items: center;
}
.index_right_item_label {
  color: rgba(0, 0, 0, 0.85);
  // font-weight: 500;
}
.index_right_item_text {
  text-align: center;
  font-size: 14px;
  color: #333;
}
.index_right_item_num {
  font-size: 14px;
  font-weight: bold;
  color: #4393f2;
  font-family: DIN-Medium, DIN;
}
.index {
  display: flex;
}
.index_left {
  flex: 1;
  height: 100vh;
  background-color: #fff;
}
.index_right {
  margin-left: 10px;
  width: 300px;
  height: 100vh;
  // background-color: #fff;
}
.finishing_rate_item_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.finishing_rate_item_rank {
  height: 24px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 24px;
}
.finishing_rate_item1 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
}
.finishing_rate_item1_name {
  font-size: 14px;
  color: #333333;
  margin-top: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
}
</style>
